<template>
	<view class="container">
		<!-- 选取本地相册贺卡图片设置背景 -->
		<view class="card-background">
			<image :src="cardImg" mode="aspectFill" class=".card-img"></image>
		</view>
		<view class="card-text">
			<text class="text-content">{{text1}}</text>
			<text class="text-content">{{text2}}</text>
			<text class="text-content3">{{text3}}</text>
		</view>
		<!-- 贺卡右下角展示From：头像和昵称 -->
		<view class="card-from" @click="setSignature()">
			<text class="fromT">From:</text>
			<image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
			<view class="nickname">{{ userInfo.nickName }}</view>
		</view>

		<!-- 发送/去制作贺卡按钮 -->
		<view class="actionC">
			<button class="save-btn" @tap="goSaveCard">保存贺卡</button>
			<button class="send-btn" v-if="fromShare" @tap="goMakeCard">我也去制作</button>
			<button class="send-btn" v-if="!fromShare" open-type="share">发送贺卡</button>
		</view>
	</view>
</template>

<script>
	import libData from "@/data/classifyData.js"
	import functionTool from "@/data/function.js"

	export default {
		onShareAppMessage() {
			return this.goShare()
		},
		onShareTimeline() {
			return this.goShare()
		},
		data() {
			return {
				fromShare: false, // 是否来自分享
				classifyIndex: 0, // 点击的哪个节日
				index: 0, // 点击的哪个贺卡
				cardImg: '', // 贺卡图片
				text1: '', // 第一行贺卡文字
				text2: '', // 第二行贺卡文字 
				text3: '', // 第三行贺卡文字
				userInfo: {
					nickName: '点击获取签名',
					avatarUrl: '../../static/center_seleted.png'
				},
				// 在页面中定义插屏广告
				// interstitialAd: ''
			}
		},
		onLoad(options) {
			this.classifyIndex = options.classifyIndex
			this.index = options.index
			var classifyDic = libData.classifyList[this.classifyIndex]
			var cardDic = classifyDic.blessList[this.index]
			var naviTitle = cardDic.title
			uni.setNavigationBarTitle({
				title: naviTitle
			})
			this.cardImg = cardDic.bgImage
			this.text1 = cardDic.text1
			this.text2 = cardDic.text2
			this.text3 = functionTool.getDateTime()
			
			if (options.user) { // 点击分享过来的携带user数据
				this.fromShare = true
				let user = JSON.parse(decodeURIComponent(options.user))
				this.userInfo = user
			} else {
				this.fromShare = false
			}
		},
		onShow() {
			if (!this.fromShare) {
				this.getUserInfo()
			}
		},
		methods: {
			// 我也去制作
			goMakeCard() {
				uni.switchTab({
					url: '/pages/homepage/home'
				});
			},

			// 保存贺卡-截图贺卡-存到相册
			goSaveCard() {
				uni.showToast({
					title: '请使用手机截屏保存。',
					icon: "none",
					duration: 1500
				})
			},

			// 去设置用户签名信息
			setSignature() {
				if (this.fromShare) {
					return;
				}
				uni.navigateTo({
					url: '/pages/usercenter/setsignature'
				})
			},

			// 取出用户授权后存储的数据
			getUserInfo() {
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						if (res.data != '') {
							this.userInfo = res.data;
						}
					}
				})
			},
			
			// share
			goShare() {
				let user = {
					'nickName': this.userInfo.nickName,
					'avatarUrl': this.userInfo.avatarUrl
				}
				return {
					title: '您收到一份来自好友' + this.userInfo.nickName + '的' + '贺卡,快快点击查看吧.',
					imageUrl: this.cardImg,
					path: 'pages/homepage/carddetail' + '?user=' + encodeURIComponent(JSON
						.stringify(user)) + '&classifyIndex=' + this.classifyIndex + '&index=' + this.index
				}
			}
		},
		onUnload() {
			// 页面关闭后销毁实例
			// this.interstitialAd.destroy()
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.card-background {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			background-color: #fff;
			width: 100%;
			height: 66%;

			.card-img {
				height: 95%;
				border-radius: 10rpx;
				border-style: solid;
				border-width: 20rpx;
				border-color: #eeebc5;
				background-color: #ddd;
				margin-left: 5rpx;
				margin-right: 5rpx;
			}
		}

		.card-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: right;
			width: 100%;
			margin-top: 20rpx;
			padding-left: 20rpx;

			.text-content {
				margin-top: 15rpx;
				width: 90%;
				height: 60rpx;
				font-size: 35rpx;
				color: #000;
				border-bottom: 0.5rpx solid #000;
			}

			.text-content3 {
				margin-top: 15rpx;
				width: 250rpx;
				height: 60rpx;
				font-size: 25rpx;
				color: #000;
				border-bottom: 0.5rpx solid #000;
				text-align: right;
				margin-right: 40rpx;
				margin-left: auto;
			}
		}

		.card-from {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-right: 30rpx;
			margin-top: 20rpx;
			width: 100%;

			.fromT {
				font-size: 40rpx;
				font-weight: bold;
				color: #000;
				margin-right: 20rpx;
			}

			.avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			.nickname {
				margin-left: 10rpx;
				font-size: 25rpx;
				color: #000;
			}
		}

		.actionC {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			height: 70rpx;
			margin-top: 40rpx;
			align-self: center;

			.save-btn {
				width: 45%;
				background-color: #fe2d81;
				border-radius: 30rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}

			.send-btn {
				width: 45%;
				background-color: #f21313;
				border-radius: 30rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
</style>
